<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>#div{width:200px;height:200px;background-color: yellow; color:#fff;position:absolute;cursor:pointer;overflow: hidden;}
        .box {border:1px dashed black;position:absolute;}
    </style>
<script>
//<!--拖拽涉及几个操作动作  鼠标按下  鼠标抬起  鼠标移动-->
/*鼠标拖拽原理*/

window.onload=function(){
   var oDiv=document.getElementById('div');
   var disX=0;
   var disY=0;
   oDiv.onmousedown=function(ev){//鼠标按下
         var oEvent=ev||event;
         disX=oEvent.clientX-oDiv.offsetLeft;//距离横坐标
         disY=oEvent.clientY-oDiv.offsetTop;//距离纵坐标
        var oBox=document.createElement('div');//鼠标按下，就先创建一个div
         oBox.className='box';//然后给创建的div给个样式
         oBox.style.width=oDiv.offsetWidth-2+'px';//新建的div的宽等于拖动div的宽-2,因为border左右两边有宽度
         oBox.style.height=oDiv.offsetHeight-2+'px';//新建的div的高等于拖动div的高-2,
//       当鼠标按下时，鼠标还没有移动，也没有给新建的div赋予位置，所以新建的div会出现在左上角//解决办法，就是给新建的div赋予位置
         oBox.style.left=oDiv.offsetLeft+'px';
         oBox.style.top=oDiv.offsetTop+'px';

         document.body.appendChild(oBox);//将新建的div赋给body页面


       function mouseMove (ev){//鼠标拖快了，会脱离方块，所以需要加在document                      鼠标移动，鼠标hover
           var oEvent=ev||event;
           var l=oEvent.clientX-disX;
           var t=oEvent.clientY-disY;

           oBox.style.left=l+'px';//
           oBox.style.top=t+'px';//
       }

       function mouseUp(){//鼠标抬起，就需要把前面的事件解除
           this.onmouseover=null;
           this.onmouseup=null;
           oDiv.style.left=oBox.offsetLeft+'px'; //鼠标抬起，将div的位置移动到虚线框的位置
           oDiv.style.top=oBox.offsetTop+'px';
           document.body.removeChild(oBox);//鼠标抬起，将新建的div干掉

           if(oDiv.releaseCapture){
               oDiv.releaseCapture();//解除事件捕获，
           }
       }


       if(oDiv.releaseCapture){
           //只在IE下兼容，在这个条件下，执行下面的代码

           oDiv.onmouseover=mouseMove;//鼠标移动

           oDiv.onmouseup=mouseUp;//鼠标抬起

           oDiv.setCapture();//事件捕获，将所有事件都集中在一个div上
       }

       else{
           //Chrome、FF
           document.onmouseover=mouseMove;//鼠标移动

           document.onmouseup=mouseUp;//鼠标抬起

           return false;// 可以解决Chrome FF IE9,有文字的情况下，但是不能解决IE6-8             解决FF空div出现的bug，通过阻止默认事件
       }


   };

};



</script>
</head>
<body>
    <div id="div">
        当鼠标按下就与方块之间有个距离，在一直拖拽过程中，这个距离不变<br>
        第一步:求鼠标与方块之间的距离, 等于=当前鼠标位置-物体位置<br>
        第二步：根据鼠标位置，计算出物体位置，等于=当前鼠标位置-鼠标与方块之间距离<br>
    </div>
</body>
</html>